ymplayer{
	background-color: rgb(52,189,207);
	display: block;
	margin:10px auto;
	width: 100%;
	position: relative;
	font-family: "Microsoft Yahei";
	color: #fff;
	margin: 10px auto;
	opacity: 0.9;
	-webkit-transition:0.3s all;
	transition:0.3s all;	
	-moz-transition:0.3s all;		
	font-size: 14px;
	line-height: 1.42857143;
}

ymplayer a{
	color:#fff!important;
}

ymplayer lrc,ymplayer song{
	display: none;
}

ymplayer loading{
	width: 100%;
	height: 100%;
	line-height: 120px;
	font-size: 24px;
	text-align: center;
	display: block;
	position: absolute;
	transition: 0.3s all ease-out;
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	z-index: 233;
	background: #000;
}
ymplayer[loop="yes"] .loop-button{
	opacity: 0.3;
}
ymplayer .play-button .btn-play{
	display:inline;
}
ymplayer .play-button .btn-pause{
	display:none;
}
ymplayer[playing] .play-button .btn-play{
	display:none;
}
ymplayer[playing] .play-button .btn-pause{
	display:inline;
}
ymplayer[current-lrc] .no-lrc{
	display:none;
}

.ym-controller{
	overflow:visible;
	white-space:nowrap;
	float:right;
	width: 60%;
	height: 50px;
	line-height: 50px;
	text-align: right;
	transition: color .25s ease, background-color .25s ease, opacity .5s ease;
	vertical-align: middle;
}
.ym-controller svg {
	width:18px;height:18px;
	vertical-align:middle;
}
.ym-controller svg path{fill:#FFF;}
.ym-songinfo{
	overflow:hidden;
	float:left;
	width: 40%;
}
.ym-songinfo p{
	margin:2px;
	white-space: nowrap;
	word-wrap: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}
.player-container{
	position:relative;
	height:60px;
	width: 100%;
	padding:5px 2%;
	box-sizing:border-box;
}
.ymbtn{
	color:#fff;
	margin:0 8px;
	font-size: 18px;
	-webkit-transition:0.3s all;
	transition:0.3s all;	
	-moz-transition:0.3s all;		
	cursor: pointer;
}
/*.vol-button {
	width: 12px;
	display: inline-block;
	text-align:left;
}*/
.vol-button .btn-volume {
	display:inline;
}
.vol-button .btn-mute {
	display:none;
}
.vol-button.muted .btn-volume {
	display:none;
}
.vol-button.muted .btn-mute {
	display:inline;
}
.volume-bar{
	display:inline-block;
	width: 30%;
	height: 50px;
	cursor: pointer;
	position:relative;
	vertical-align: middle;
}
.volume-bar-inner{
	position:absolute; left:0; right:5px; top:22px;
	height: 4px;
	background-color: #fff;
}
.volume-current{
	width: 100%;
	background-color: rgb(129,224,242);
	height: 100%;
	transition: 0.3s all;
	-webkit-transition:0.3s all;
	-moz-transition:0.3s all;
	position:relative;
}
.ym-cover-image{
	display: inline-block;
	float: left;
	height: 50px;
	width: 50px;
	margin-right: 10px;
	background-size: cover;
	background-position: center;
}
.ym-progress{
	height: 60px;
	margin: 0 2%;
	position: relative;
}

.ym-pgbar-outer{
	position:absolute; top:0; left:60px; bottom:0; right:60px;
	cursor:pointer;
}
.ym-pgbar{
	display: inline-block;
	height: 4px;
	background-color: rgb(117,222,243);
	position: absolute;
	top: 50%;
	transform: translate3D(0,-50%,0);
	-webkit-transform: translate3D(0,-50%,0);
	left: 0;
	cursor: pointer;
	right: 0;
}

.current-time{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 60px;
	text-align: center;
}
.duration-time{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	line-height: 60px;
	text-align: center;
}
.ym-played{
	position: relative;
	height: 100%;
	width: 0%;
	background-color: rgb(206,255,255);
	-webkit-transition:0.2s all;
	transition:0.2s all;	
	-moz-transition:0.2s all;	
}
.ym-circle{
	width: 6px;
	height: 6px;
	position: absolute;
	right: 0;
	top: 50%;
	margin: -5px;
	border-radius: 50%;
	background-color: rgb(206,255,255);
	border:2px solid #fff;
	box-sizing:content-box!important;
	-moz-box-sizing:content-box!important;
	-webkit-box-sizing:content-box!important;
	transition:0.3s all;
	-webkit-transition:0.3s all;
	-moz-transition:0.3s all;	
	-o-transition:0.3s all;	
	cursor: w-resize;
}
.ym-circle:hover{
	width:12px;
	height:12px;
	margin:-8px;
}
.lrc-container{
	position:absolute;left:0;right:0;top:0;
	text-align: center;
	transition: 1s all ease-out;
	-webkit-transition: 1s all ease-out;
	-moz-transition: 1s all ease-out;
}
.ym-playlist{
	transition: 0.3s all ease-out;
	-webkit-transition:0.3s all ease-out;
	-moz-transition:0.3s all ease-out;
	width: 100%;
	height: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
}
.ym-playlist.ym-show{
	height: 400px;
	overflow-y: auto;
}
.ym-playlist > single{
	font-size: 16px;
	padding: 10px 3%;
	display: block;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	position: relative;
	cursor:pointer;
}
.ym-playlist > single > .list-number{
	color: #dedede;
}
.ym-playlist > single >  .list-song{
	padding: 0px 0px 0px 20px;
}
.ym-playlist  > single > .list-artist{
	position: absolute;
	right: 5%;
}
single:hover{
	background-color: rgba(51, 51, 51, 0.08);
}
.single-active{
	background-color: rgba(51, 51, 51, 0.1);
	position: relative;
	border-left: 4px solid rgb(33,150,243);
}
.ym-lrcbox{
	height: 0px;
	overflow: hidden;
	transition: 0.3s all;
	-webkit-transition:0.3s all;
	-moz-transition:0.3s all;
	color: rgb(209,253,253);
	position: relative;
}
.ym-lrcbox.ym-show{
	height:290px;
}
.lrc-container lyric{
	display:block;
	font-weight: normal;
	font-size: 18px;
	line-height: 2;
	vertical-align: middle;
	padding:0;
	margin:0;
}
.lrc-container lyric.ym-active{
	color: #fff;
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;	
	font-weight:bold;
	margin:0;
	padding:0;
}
lyric p {
	padding:10px 0;
	margin:0;
}
.no-lrc{
	display: table;
	width: 100%;
	height: 100%;
}
.no-lrc p {
	display: table-cell;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 18px;
}
.lrc-fixer {
	background-color: rgba(51, 51, 51, 0.08);
	opacity: 0;
	position: absolute;
	left: 0%;
	top: 50%;
	transition: 0.75s all;
	-webkit-transition: 0.75s all;
	-moz-transition: 0.75s all;
	transform: translate3D(0,-50%,0);
	-webkit-transform: translate3D(0,-50%,0);
}
.ym-fix-btn{display:block;cursor:pointer;width:28px;line-height:38px;vertical-align:middle;text-align:center;}
.ym-fix-btn svg{display:inline-block;width:24px;height:24px;vertical-align:middle;text-align:center;}
.ym-fix-btn svg path{fill:#FFF;}

.ym-progress, .ym-controller{
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
}

/* Responsive Design */
ymplayer.max-width-644 .ym-songinfo{
	display: none;
}
ymplayer.max-width-644 .ym-controller{
	width: 100%;
	text-align:center;
	float:none;
}
ymplayer.max-width-560 .current-time,
ymplayer.max-width-560 .duration-time{
	display: none;
}
ymplayer.max-width-560 .ym-pgbar-outer{
	left: 0;
	right: 0;
}
ymplayer.max-width-560 .ym-progress{
	margin:0 8px;
}
ymplayer.max-width-400 .volume-bar{
	display: none;
}
ymplayer.max-width-400 .ym-controller{
	text-align: center;
	width: 100%;
}

/** Other Color */

/* nico : Pink */
.nico{
	background-color: rgb(255,128,132);
}
.nico .ym-pgbar, .nico .ym-circle, .nico .volume-current{
	background-color:#FFDDE4;
}
.nico lyric{
	color:#FFDDE4;
}
.nico .ym-active{
	color:#fff;
}
.nico .ym-played{
	background-color: #fff;
}
.nico .single-active {
	border-left: 4px solid rgb(255,43,50);
}

/* honoka : orange */
.honoka{
	background-color: rgb(236,141,51);
}
.honoka .ym-pgbar, .honoka .ym-circle, .honoka .volume-current{
	background-color: rgb(246,190,109);
}
.honoka lyric{
	color: #FFD6BB;
}
.honoka .ym-played{
	background-color: #fff;
}
.honoka .ym-active{
	color:#fff;
}
.honoka .single-active {
	border-left: 4px solid rgb(197,95,0);
}

/* umi : depp blue */
.umi{
	background-color: rgb(67,66,140)
}
.umi .ym-pgbar, .umi .ym-circle, .umi .volume-current{
	background-color: rgb(147,160,210);
}
.umi .ym-played{
	background-color: #fff;
}
.umi .ym-active{
	color:#fff;
}
.umi .single-active {
	border-left: 4px solid rgb(15,14,89);
}

/* kotori : grey */
.kotori{
	background-color: rgb(192,169,136)
}
.kotori .ym-pgbar, .kotori .ym-circle, .kotori .volume-current{
	background-color: rgb(212,192,161);
}
.kotori .ym-played{
	background-color: #fff;
}
.kotori .ym-active{
	color:#fff;
}
.kotori lyric{
	color: #EFE1CB;
}
.kotori .single-active {
	border-left: 4px solid rgb(159,130,87);
}
